<div class="magic-science">
  <div class="home-header">
    <app-head></app-head>
    <div class="top-tab">
      <div class="top-tab2">
        <div class="tab" [ngClass]="tab.active?'tab-active':''" *ngFor="let tab of tabList;index as i"
             routerLink="{{tab.router}}">{{tab.name}}</div>
      </div>
    </div>
  </div>

  <nz-spin [nzSpinning]="isSpinning">
    <div class="science-content">
      <div class="top-box">
        <div class="title-search">
          <div class="search-box">
            <input
              placeholder="请输入搜索内容"
              nz-input
              [(ngModel)]="selectedValue"
              (ngModelChange)="search($event)"
              [nzAutocomplete]="auto"
              (click)="clickInput()"
            />
            <nz-autocomplete nzBackfill #auto>
              <nz-auto-option *ngFor="let o of listOfOption" [nzValue]="o.value">{{ o.text }}</nz-auto-option>
            </nz-autocomplete>

            <!--<button nz-button nzSize="large" routerLink="/search-result" [queryParams]="{key: selectedValue}" nzSearch
                    [disabled]="!selectedValue"
                    style="background-color: #034ea2">搜索
            </button>-->

            <i *ngIf="selectedValue" class="anticon ant-cascader-picker-clear anticon-close-circle" nztheme="fill"
               nztype="close-circle" ng-reflect-nz-type="close-circle" ng-reflect-nz-theme="fill"
               (click)="searchContent_clear()">
              <svg viewBox="64 64 896 896" focusable="false" fill="currentColor" width="1em" height="1em"
                   class="ng-tns-c5-9" data-icon="close-circle" aria-hidden="true">
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
              </svg>
            </i>

            <button nz-button nzSize="large" (click)="searchContent()" nzSearch [disabled]="!selectedValue"
                    style="background-color: #034ea2">搜索
            </button>

          </div>

        </div>
        <a routerLink="/subscription">
          <img src="../../../assets/image/magic-science-innovate/subscription.png">
        </a>
      </div>
      <div class="divider"></div>

      <app-select-condition (selectResult)="queryPolicy($event)"></app-select-condition>
      <div class="divider"></div>

      <div class="policy-list-area">
        <ng-container *ngFor="let news of objectKeys(sciencePolicyList);index as i">
            <div class="policy-list"  *ngIf="sciencePolicyList[news].policys.listSimple.length > 0" >
              <img [src]="sciencePolicyList[news].imgSrc" alt="">
              <div class="list">
                <!--<div class="list-item" *ngFor="let policy of sciencePolicyList" routerLink="/new-policy-detail"
                     [queryParams]="{id: policy.id}">
                  {{policy.title}}
                </div>-->
                <div class="list-left">
                  <!--<div class="policy-item" *ngFor="let policy of sciencePolicyList[news].policys.listSimple" routerLink="/new-policy-detail" [queryParams]="{id: policy.id, type:'相关政策'}">-->
                  <a class="policy-item" *ngFor="let policy of sciencePolicyList[news].policys.listSimple" target="_blank" href="/new-policy-detail?type=相关政策&id={{policy.id}}">
                    <div class="left-policy">
                      <div class="policy-time">
                        <div class="year">[{{policy.publishDate}}]</div>
                      </div>
                      <div class="policy-right">
                        <div class="little-title" [title]="policy.title">
                          {{policy.title}}
                        </div>
                      </div>
                    </div>
                  </a>
                  <div *ngIf="sciencePolicyList[news].policys.listSimple.length == 5"   class="click-more"
                       routerLink="/new-policy-list"
                       [queryParams]="{region: news, opt: curSearchStr}">查看更多
                  </div>
                </div>

                <nz-divider [nzType]="'vertical'" style="height: 200px;align-self:center;margin: 0 36px"></nz-divider>

                <div class="chart-area">
                  <div class="bar-wrap">
                    <div echarts id="word-chart" [options]="chartOption" [merge]="updateData[i]"></div>
                  </div>
                </div>
              </div>

            </div>
        </ng-container>
      </div>
    </div>
  </nz-spin>

</div>
<div class="h-foot">
  <div class="text">
    <div class="address">上海推进科技创新中心建设办公室 版权所有</div>
    <div class="address2">地址：上海市浦东新区张东路1158号3号楼 &nbsp;&nbsp;&nbsp;&nbsp; 联系电话 : 021-68796635</div>
    <div class="phone">技术支持 : 中国科学院文献情报中心</div>
    <a class="nav" href="/admin/" target="_blank">后台入口</a>
  </div>
</div>
